<template>
  <div style="width: 1200px; margin: 0 auto;">
    <el-row :gutter="10">
      <el-col :span="8">
        <el-card style="width: 100%;height:600px;">
          <div>
            <div>
              <p style="float: left;margin-top: 2px;position: relative;font-size: 20px;font-weight: bold"><el-icon><Operation /></el-icon>热门推荐</p><br>
              <div style="position: absolute;float: left;margin-top: 7px">
                <span style="margin-left: 10px;">长白山</span>
                <span style="margin-left: 10px;">三亚</span>
                <span style="margin-left: 10px;">成都</span>
                <span style="margin-left: 10px;">西安</span>
                <span style="margin-left: 10px;">延吉</span>
                <span style="margin-left: 10px;">九寨沟</span>
                <span style="margin-left: 10px;">北京</span>
              </div>
            </div>
            <div style="margin-top: 50px">
              <p style="margin-top: 2px;position: absolute ;font-size: 20px;font-weight: bold"><el-icon><Operation /></el-icon>东北地区</p><br>
              <div style="position: absolute;float: left;margin-top: 18px">
                <span style="margin-left: 10px;">长春</span>
                <span style="margin-left: 10px;">沈阳</span>
                <span style="margin-left: 10px;">哈尔滨</span>
                <span style="margin-left: 10px;">大连</span>
                <span style="margin-left: 10px;">齐齐哈尔</span>
                <span style="margin-left: 10px;">吉林</span>
                <span style="margin-left: 10px;">七台河</span>
              </div>
            </div>
            <div style="margin-top: 50px">
              <p style="margin-top: 2px;position: absolute; font-size: 20px;font-weight: bold"><el-icon><Operation /></el-icon>云南/贵州</p><br>
              <div style="position: absolute;float: left;margin-top: 18px">
                <span style="margin-left: 10px;">西双版纳</span>
                <span style="margin-left: 10px;">昆明</span>
                <span style="margin-left: 10px;">丽江</span>
                <span style="margin-left: 10px;">贵阳</span>
                <span style="margin-left: 10px;">黄果树</span>
                <span style="margin-left: 10px;">香格里拉</span>
              </div>
            </div>
            <div style="margin-top: 50px">
              <p style="margin-top: 2px;position: absolute;font-size: 20px;font-weight: bold"><el-icon><Operation /></el-icon>大西北/内蒙古</p><br>
              <div style="position: absolute;float: left;margin-top: 18px">
                <span style="margin-left: 10px;">西安</span>
                <span style="margin-left: 10px;">呼伦贝尔</span>
                <span style="margin-left: 10px;">阿尔山</span>
                <span style="margin-left: 10px;">敦煌</span>
                <span style="margin-left: 10px;">乌鲁木齐</span>
                <span style="margin-left: 10px;">通辽</span>
              </div>
            </div>
            <div style="margin-top: 50px">
              <p style="margin-top: 2px;position: absolute;font-size: 20px;font-weight: bold"><el-icon><Operation /></el-icon>广东/广西</p><br>
              <div style="position: absolute;float: left;margin-top: 18px">
                <span style="margin-left: 10px;">桂林</span>
                <span style="margin-left: 10px;">广州</span>
                <span style="margin-left: 10px;">北海</span>
                <span style="margin-left: 10px;">珠海</span>
                <span style="margin-left: 10px;">深圳</span>
                <span style="margin-left: 10px;">阳塑</span>
                <span style="margin-left: 10px;">北京</span>
              </div>
            </div>
            <div style="margin-top: 50px">
              <p style="margin-top: 2px;position: absolute;font-size: 20px;font-weight: bold"><el-icon><Operation /></el-icon>湖南/湖北/北京</p><br>
              <div style="position: absolute;float: left;margin-top: 18px">
                <span style="margin-left: 10px;">北京</span>
                <span style="margin-left: 10px;">张家界</span>
                <span style="margin-left: 10px;">长沙</span>
                <span style="margin-left: 10px;">武汉</span>
                <span style="margin-left: 10px;">恩施市</span>
                <span style="margin-left: 10px;">神农架</span>
                <span style="margin-left: 10px;">宜昌</span>
              </div>
            </div>
            <div style="margin-top: 50px">
              <p style="margin-top: 2px;position: absolute;font-size: 20px;font-weight: bold"><el-icon><Operation /></el-icon>大华东</p><br>
              <div style="position: absolute;float: left;margin-top: 18px">
                <span style="margin-left: 10px;">上海</span>
                <span style="margin-left: 10px;">杭州</span>
                <span style="margin-left: 10px;">南京</span>
                <span style="margin-left: 10px;">苏州</span>
                <span style="margin-left: 10px;">乌镇</span>
                <span style="margin-left: 10px;">黄山</span>
                <span style="margin-left: 10px;">舟山</span>
              </div>
            </div>
            <div style="margin-top: 50px">
              <p style="margin-top: 2px;position: absolute;font-size: 20px;font-weight: bold"><el-icon><Operation /></el-icon>四川/重庆/西藏</p><br>
              <div style="position: absolute;float: left;margin-top: 18px">
                <span style="margin-left: 10px;">成都</span>
                <span style="margin-left: 10px;">九寨沟</span>
                <span style="margin-left: 10px;">重庆</span>
                <span style="margin-left: 10px;">拉萨</span>
                <span style="margin-left: 10px;">稻城</span>
                <span style="margin-left: 10px;">峨眉山</span>
                <span style="margin-left: 10px;">都江堰</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <br>
      <el-col :span="16">
        <el-carousel style="width: 800px;float: right;">
          <el-carousel-item v-for="b in bannerArr">
            <img :src="b" style="width: 100%; height: 100%">
          </el-carousel-item>
        </el-carousel>
        <el-row :gutter="20">
          <el-col :span="6" v-for="c in contentArr" style="margin: 5px 0">
            <img :src="c.imgUrl" style="width: 100%;height: 100%">
          </el-col>
        </el-row>
        <img src="imgs/q.jpg" style="height: 47px;width: 100%">
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {ref} from "vue";
const bannerArr = ref(["/imgs/zou1.jpg", "/imgs/zou2.jpg"])
const contentArr=ref([{"imgUrl": "/imgs/di1.jpg"},{"imgUrl": "/imgs/di2.jpg"},{"imgUrl": "/imgs/di3.jpg"},{"imgUrl": "/imgs/di4.jpg"}])
</script>
<style scoped>
</style>
<!--<img :src="c.imgUrl" style="width: 100%;height: 100%">-->